<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格演示</title>
</head>
<body>
    <p>表格是用来显示二维数据的重要标签</p>
    <hr>
    <p>构建2行3列表格</p>
    <!-- border 添加边框 不推荐使用 -->
     <table border="1">
        <!-- 三行两列表格 table>(tr>td*3)*2 -->
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
     </table>
     <hr>
     <p>构建caption、thead、tbody、tfoot的表格</p>
     <table border="1">
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>总分</td>
                <td>排名</td>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>2019001</td>
                    <td>张</td>
                    <td>330</td>
                    <td>1</td>
                </tr>
                <tr>
                        <td>2019002</td>
                        <td>李</td>
                        <td>310</td>
                        <td>3</td>
                    </tr>
                    <tr>
                            <td>2019003</td>
                            <td>王</td>
                            <td>329</td>
                            <td>2</td>
                        </tr>
                   
        </tbody>
        <tfoot>
                <tr>
                        <td>统计:</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
        </tfoot>
    </table>
    
    <hr>
    <p>构建caption、thead、tbody、tfoot的表格,th显示单元格表头</p>
    <table border="1">
       <caption>学生信息表</caption>
       <thead>
           <tr>
               <td>&nbsp</td>
               <th>学号</th>
               <th>姓名</th>
               <th>总分</th>
               <th>排名</th>
           </tr>
       </thead>
       <tbody>
               <tr>
                   <th>1</th>
                   <td>2019001</td>
                   <td>张</td>
                   <td>330</td>
                   <td>1</td>
               </tr>
               <tr>
                   <th>2</th>
                       <td>2019002</td>
                       <td>李</td>
                       <td>310</td>
                       <td>3</td>
                   </tr>
                   <tr>
                       <th>3</th>
                           <td>2019003</td>
                           <td>王</td>
                           <td>329</td>
                           <td>2</td>
                       </tr>
                  
       </tbody>
       <tfoot>
               <tr>
                       <!-- <td>统计:</td>
                       <td>0</td>
                       <td>0</td> -->
                       <td colspan="5">统计</td>
                   </tr>
       </tfoot>
   </table>

   <p>表格列分组</p>
   <table border="1">
       <colgroup>
        <col span="2">
        <col span="3">
     </colgroup>
       <tr>
           <td>分组1</td>
           <td>分组2</td>
           <td>分组3</td>
           <td>分组4</td>
           <td>分组5</td>
       </tr>
       <tr>
           <td>分组1</td>
           <td>分组2</td>
           <td>分组3</td>
           <td>分组4</td>
           <td>分组5</td>
       </tr>
       <tr>
           <td>分组1</td>
           <td>分组2</td>
           <td>分组3</td>
           <td>分组4</td>
           <td>分组5</td>
       </tr>
   </table>
    <br><br><br><br><br>
    
</body>
</html>